<template>
  <div>
    <div class="layout-content main-content">
      <Button type="primary" @click="add('添加类别')">添加</Button>
      <Table ref="table" border :columns="fields" :data="tabledata" :height="tableHeight">
        <!-- table 操作 -->
        <template slot-scope="{ row ,index}" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="add('编辑类别',row.Id,row.Name)">编辑</Button>
            <Button type="error" size="small" @click="remove(row.Id,index)">删除</Button>
        </template>
      </Table>
    </div>
      <!-- 弹层 -->
      <Modal
          v-model="modal_visable"
          :title="modal_title"
          :loading="modalLoading"
          :mask-closable="false">
          <!-- 弹层内容 -->
          <Form ref="modal_form" :model="modal_form" :rules="modal_form_rules">
            <FormItem prop="Name">
                <Input type="text" v-model="modal_form.Name" placeholder="请输入治疗师分类名称" />
            </FormItem>
            <input type="hidden" v-model="modal_form.Id">
          </Form>
          <div slot="footer">
              <Button @click="modal_cancel">取消</Button>
              <Button type="primary" @click="modal_ok">确定</Button>
          </div>
          <!-- 弹层内容 end -->
      </Modal>
  </div>
</template>

<script>
import mixin from '../Mixin/mix'
import { constants } from 'crypto';
export default {
  data() {
    return {
      // 弹层显示状态
      modal_visable:false,
      modal_title:'弹层标题',
      modalLoading:false,
      // 表格字段
      fields: [
        {
            type: 'index',
            width: 60,
            align: 'center'
        },
        {
          title: "名称",
          key: "Name"
        },
        {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
        }
      ],
      // 表格数据
      tabledata: [],

      // 弹层表单
      modal_form:{
        Name:'',
        Id:''
      },
      // 弹层表单校验规则
      modal_form_rules:{
        Name: [
          { required: true, message: '请添加类别名称', trigger: 'blur' }
        ],
      }
    };
  },
  mixins:[mixin],
  beforeMount() {
    this.loadData();
  },
  methods: {
    // 获取数据
    loadData() {
      this.ajax('api/Project/XmlbList/',"get",{},true).then(res => {
        this.tabledata = res.data.data.list
      });
    },
    // action 点击添加
    add(title,id='0',name=''){
      this.modal_visable = true;
      this.modal_title = title;
      this.modal_form.Id = id;
      this.modal_form.Name = name;
    },
    // action 点击删除
    remove(id,index){
      this.$Modal.confirm({
          title: '操作提示',
          content: '<p>您确认要删除吗？</p>',
          loading: true,
          onOk: () => {
               this.ajax('api/Project/XmlbDel/',"post",{Id:id},true).then(res => {
                  setTimeout(() => {
                    this.$Modal.remove();
                    if(res.data.code == 200){
                      this.tabledata.splice(index, 1);
                    }
                    this.$Notice.success({
                        title: '操作提示',
                        desc:res.data.msg
                    });
                  }, 500);
              });
          },
          onCancel: () => {
              this.$Message.info('取消操作');
          }
      });
    },
    // 弹层点击确定回调
    modal_ok () {
      this.$refs["modal_form"].validate((valid) => {
          if (valid) {
              var param = this.modal_form;
              this.ajax('api/Project/XmlbInfo/',"post", param,true).then(res => {
                this.$Notice.success({
                    title: '操作提示',
                    desc:res.data.msg
                });
                if(res.data.code == 200){
                  this.loadData();
                }
                this.modal_visable=false;
              });
              
          } else {
              this.$Message.error('请填写必填项');
          }
      })
    },
    // 弹层点击确定回调
    modal_cancel () {
        // 弹层取消点击回调
        this.$Message.info('取消操作');
        this.modal_visable=false;
    },
  }
};
</script>

<style scoped>
@import "../../style/base.css";
.main-content {
  height: calc(100vh - 145px);
  overflow: hidden;
  padding:15px;
  box-sizing: border-box;
}
</style>
